<template>
  <div>
    <img class="bgone" :src="require('@/assets/login_bks.png')"/>
    <!-- logo -->
    <div class="show_logo">
      <img :src="require('@/assets/logo_title.png')" alt srcset/>
    </div>
    <div class="table">
      <div class="table-content flex flexR center">
        <img class="pic" :src="require('@/assets/login_bk.png')"/>
        <!-- 账号登录 -->
        <div class="login-info">
          <div class="login-title">邵东市寄递物流治安管理系统</div>
          <div class="user flex flexR center Ma br">
            <el-input
                v-model.trim="user_name"
                ref="user_name"
                autocomplete="off"
                suffix-icon="el-icon-user"
                placeholder="请输入用户名"
            ></el-input>
          </div>
          <div class="password flex flexR center Ma br">
            <el-input
                type="password"
                name="密码"
                placeholder="请输入密码"
                v-model.trim="password"
                ref="password"
                suffix-icon="el-icon-lock"
                :show-password="true"
            ></el-input>
          </div>
          <div class="vcode flex flexR flexJ Ma br" v-if="0">
            <div class="flex flexR flexJ center" style="width:200px">
              <el-input
                  ref="v_code"
                  style="width:100%"
                  type="text"
                  name="验证码"
                  placeholder="请输入手机验证码"
                  @keyup.enter.native="login_into"
                  v-model.trim="v_code"
              ></el-input>
            </div>
            <el-button
                type="info"
                @click="send_code"
                :style="{width:'130px'}"
            >{{send_code_show==false?"发送验证码":code_num}}
            </el-button>
          </div>
          <div class="btn-login flex flexR center">
            <el-button class="btn" type="primary" @click="login_into">登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
	export default {
		name: "login",
		data() {
			return {
				user_name: "", //用户名
				password: "", //密码
				v_code: "", //验证码
				flag: true, //是否发送验证码成功
				send_code_show: false,
				code_num: 120
			};
		},
		mounted() {
			// 默认登录的人 去登录【含过期】
			localStorage.removeItem("pathObj");
			localStorage.removeItem("showNav");
			localStorage.removeItem("showNavTop");
			localStorage.removeItem("store");
		},
		// 属性监听
		watch: {},
		// 页面事件
		methods: {
			login_into() {
				this.clear_data();
				var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
				if (
					userAgent.indexOf("MSIE 8.0") > -1 ||
					userAgent.indexOf("rv:11.0) like Gecko") > -1
				) {
					var r = confirm(
						"系统暂不支持IE，建议使用谷歌浏览器！\n 去官网下载谷歌浏览器。"
					);
					if (r === true) {
						$("#loader-wrapper").css({display: "block"});
						$("#app").css({display: "none"});
						var google = "https://www.google.cn/intl/zh-CN/chrome/";
						window.open(google);
					} else {
						W;
						this.login_info();
					}
				} else {
					this.login_info();
				}
			},
			// 组装权限树
			put_auth(menus) {
				let authority = {};
				if (Array.isArray(menus) && menus.length > 0) {
					menus.forEach((v, k) => {
						if (Array.isArray(v.list) && v.list.length > 0) {
							let list_ = v.list || [];
							list_.forEach((v1, k1) => {
								authority[v1.route] = (function (actions) {
									let obj = {};
									actions.forEach(r => {
										return obj[r.action_key] = r.checked;
									});
									return obj;
								})(v1.actions);
							});
						}
					});
					return authority || {};
				}
			},
			login_info() {
				if (!this.user_name) {
					this.$message.error("请填写用户名");
					this.$refs.user_name.focus();
					return;
				}
				if (!this.password) {
					this.$message.error("请填写密码");
					this.$refs.password.focus();
					return;
				}

				let post_data = {
					account: this.user_name,
					password: this.password
				};
				this.$raxios.post(this.$mapapi.admin_doAdminLogin, {
					data: post_data
				}).then(res => {
					if (res.code === 200) {
						let {token, menus} = res.data || {};
						localStorage.setItem("token", token);
						localStorage.setItem("menus", menus);
						this.$message.success(res.msg);
						this.$store.commit("changeState", {
							token: token,
							navList: menus,
							authority: this.put_auth(menus)
						});
						//进入后台
						localStorage.setItem("store", JSON.stringify(this.$store.state));
						this.$router.replace({path: "/"});
					} else {
						this.$message.error(res.msg);
					}
				}).catch(res => {
					this.$message.error(res.msg || '服务繁忙请稍后再试');
				});
			},
			clear_data() {
				localStorage.removeItem("pathObj");
				localStorage.removeItem("showNav");
				localStorage.removeItem("showNavTop");
				localStorage.removeItem("store");
			}
		}
	};
</script>

<style lang="less" :scope="true" src="@/style/login.less">
</style>
